<template>
	<div class="publicformview">
		<el-form label-width='100px' :inline="true" :disabled='blockType==3' :model="listQuery" size="mini" ref="searchForm"
			style="margin-top: 20px;">
			<el-row :gutter="24">
				<el-col :span="8">
					<el-form-item label="租金类别：" prop="rentway">
						<el-select v-model="listQuery.rentway" @change="zujinChange"  value-key="classname">
							<div v-for="(item,index) in zujinleibieList">
								<el-option :label="item.classname" :value="item" :key="index"></el-option>
							</div>
						</el-select>
					</el-form-item>
				</el-col>
				<el-col :span="8">
					<el-form-item label="净高(米)：" prop="height">
						<el-input v-model="listQuery.height"></el-input>
					</el-form-item>
				</el-col>
				<el-col :span="8">
					<el-form-item label="基本租金：" prop="basicrent">
						<el-input v-model="listQuery.basicrent"></el-input>
					</el-form-item>
				</el-col>
				<el-col :span="8">
					<el-form-item label="结构：" prop="structure">
						<el-select v-model="listQuery.structure" @change="jiegouChange"  value-key="classmid">
							<div v-for="(item,index) in jiegouList">
								<el-option :label="item.classmid" :value="item" :key="index"></el-option>
							</div>
						</el-select>
					</el-form-item>
				</el-col>
				<el-col :span="8">
					<el-form-item label="埋深(米)：" prop="depth">
						<el-input v-model="listQuery.depth"></el-input>
					</el-form-item>
				</el-col>
				<el-col :span="8">
					<el-form-item label="暖气租金：" prop="heatrent">
						<el-input v-model="listQuery.heatrent"></el-input>
					</el-form-item>
				</el-col>
				<el-col :span="8">
					<el-form-item label="地级：" prop="addresslevel">
						<el-select v-model="listQuery.addresslevel">
							<div v-for="(item,index) in dijiList" :key="index">
								<el-option :label="item.detail" :value="item.detail" :key="index"></el-option>
							</div>
						</el-select>
					</el-form-item>
				</el-col>
				<el-col :span="8">
					<el-form-item label="减收比例：" prop="reducepercent">
						<el-input v-model="listQuery.reducepercent"></el-input>
					</el-form-item>
				</el-col>
				<el-col :span="8">
					<el-form-item label="超高租金：" prop="overheightrent">
						<el-input v-model="listQuery.overheightrent"></el-input>
					</el-form-item>
				</el-col>
				<el-col :span="8">
					<el-form-item label="单位租金：" prop="unitrentprice">
						<el-input v-model="listQuery.unitrentprice"></el-input>
					</el-form-item>
				</el-col>
				<el-col :span="8">
					<el-form-item label="超高(cm)：" prop="overheight">
						<el-input v-model="listQuery.overheight"></el-input>
					</el-form-item>
				</el-col>
				<el-col :span="8">
					<el-form-item label="电梯租金：" prop="elevatorrent">
						<el-input v-model="listQuery.elevatorrent"></el-input>
					</el-form-item>
				</el-col>
				<el-col :span="8">
					<el-form-item label="暖气单价：" prop="heatunitrent">
						<el-input v-model="listQuery.heatunitrent"></el-input>
					</el-form-item>
				</el-col>
				<el-col :span="8">
					<el-form-item label="超高系数：" prop="overheightincrease">
						<el-input v-model="listQuery.overheightincrease"></el-input>
					</el-form-item>
				</el-col>
				<el-col :span="8">
					<el-form-item label="租定金额：" prop="rentprice">
						<el-input v-model="listQuery.rentprice"></el-input>
					</el-form-item>
				</el-col>
			</el-row>
		</el-form>
		<div class="bottomTop" v-if="blockType!=3">
			<el-button type="primary" size="mini" @click="handleAddUser">保存</el-button>
		</div>
	</div>
</template>

<script>
	import {
		addRoom,
		roomDetails,
		updRoom
	} from '@/api/industry'
	export default {
		props:{
			blockType:String,
			roomid:String
		},
		name: "canquanqingkuang",
		data() {
			return {
				listQuery: {
					rentway:'',
					height:'',
					basicrent:'',
					structure:'',
					depth:'',
					heatrent:'',
					addresslevel:'',
					reducepercent:'',
					overheightrent:'',
					HeatUn:'',
					unitrentprice:'',
					overheight:'',
					elevatorrent:'',
					heatunitrent:'',
					overheightincrease:'',
					rentprice:''
				},
				total: 0,
				options: [{
					key: "1"
				}],
				listLoading: false,
				dialogVisible: false,
				isChanquan: true,
				type: 1,
				chanyeList:[],
				zujinleibieList:[],
				jiegouList:[],
				dijiList:[]
			};
		},

		computed: {
		},
		watch:{
			'listQuery.basicrent':{
				handler(newValue){
					console.log(newValue)
					this.allSum(newValue)
				}
			}
		},
		mounted() {
			// 遍历字典
			this.zujinleibieList = []
			this.chanyeList = JSON.parse(localStorage.getItem('chanye'))
			this.chanyeList.forEach((item,index)=>{
				if(item.classname == '工商业租金'||item.classname == '行政事业租金'||item.classname == '金融业租金'||item.classname == '财政拨款'){
					this.zujinleibieList.push(item)
				}
			})
			
			if(this.roomid){
				localStorage.setItem('roomid',this.roomid)
				let data = {
					RoomID:this.roomid
				}
				roomDetails(data).then(res=>{
					this.listQuery = res.data
					console.log(this.listQuery)
				})
			}
			
			if(localStorage.getItem('feizhuzaizujing')){
				this.listQuery = JSON.parse(localStorage.getItem('feizhuzaizujing'))
			}
			
			setTimeout(()=>{
				this.allSum(this.listQuery.basicrent)
			},500)
		},

		methods: {
			allSum(basicrent){
				let jibenxinxi = JSON.parse(localStorage.getItem('jibenxinxi'))
				this.listQuery.unitrentprice = Number(basicrent)*Number(jibenxinxi.rentarea)
				this.$forceUpdate();
			},
			resetForm(val) {
				console.log("1");
				this.$refs[val].resetFields();
			},
			handleAddUser() {
				let data = {
					rentway:this.listQuery.rentway,
					height:this.listQuery.height,
					basicrent:this.listQuery.basicrent,
					structure:this.listQuery.structure,
					depth:this.listQuery.depth,
					heatrent:this.listQuery.heatrent,
					addresslevel:this.listQuery.addresslevel,
					reducepercent:this.listQuery.reducepercent,
					overheightrent:this.listQuery.overheightrent,
					HeatUn:this.listQuery.HeatUn,
					unitrentprice:this.listQuery.unitrentprice,
					overheight:this.listQuery.overheight,
					elevatorrent:this.listQuery.elevatorrent,
					heatunitrent:this.listQuery.heatunitrent,
					overheightincrease:this.listQuery.overheightincrease,
					rentprice:this.listQuery.rentprice,
					roomid:localStorage.getItem('roomid')
				}
				console.log(this.blockType)
				if(this.blockType==2){
					updRoom(data).then(res=>{
						console.log(res)
						this.$message(res.message);
					})
				}else{
					addRoom(data).then(res=>{
						console.log(res)
						this.$message(res.message);
					})
				}
			},
			returns() {
				this.$router.go(-1)
			},
			// 选择类型
			selectButton(type) {
				this.type = type
			},
			zujinChange(e){
				this.jiegouList = e.classmidList
				this.listQuery.rentway = e.classname
			},
			jiegouChange(e){
				console.log(e)
				this.listQuery.structure = e.classmid
				this.dijiList = e.classdetailList
			}
			
		},
		beforeDestroy(){
			let data = {
				rentway:this.listQuery.rentway,
				height:this.listQuery.height,
				basicrent:this.listQuery.basicrent,
				structure:this.listQuery.structure,
				depth:this.listQuery.depth,
				heatrent:this.listQuery.heatrent,
				addresslevel:this.listQuery.addresslevel,
				reducepercent:this.listQuery.reducepercent,
				overheightrent:this.listQuery.overheightrent,
				HeatUn:this.listQuery.HeatUn,
				unitrentprice:this.listQuery.unitrentprice,
				overheight:this.listQuery.overheight,
				elevatorrent:this.listQuery.elevatorrent,
				heatunitrent:this.listQuery.heatunitrent,
				overheightincrease:this.listQuery.overheightincrease,
				rentprice:this.listQuery.rentprice,
				roomid:localStorage.getItem('roomid')
			}
			localStorage.setItem('feizhuzaizujing', JSON.stringify(data))
		}
	};
</script>

<style scoped>
	.headTop {
		width: 100%;
		display: flex;
		justify-content: space-between;
	
		.xinxi {
			display: flex;
			width: 800px;
		}
	}
	
	.el-form-item {
		justify-content: start !important;
	}
	
	.el-select {
		width: 180px;
	}
	
	.el-input {
		width: 180px;
	}
	
	.el-date-picker {
		width: 180px;
	}
	
	.bottomTop {
		width: 100%;
		display: flex;
		justify-content: end;
	}
	
	.tabButton {
		background: #EFF2F7;
		color: #333333;
		border: none;
	}
</style>